import React, { Component } from 'react';
import { base, ajax, toast} from 'nc-lightapp-front';
const { NCModal, NCButton, NCProgressBar } = base;
const { Header: ModalHeader, Body: ModalBody, Footer: ModalFooter } = NCModal;

class FileUploadModel extends Component {
    constructor(props) {
        super(props);
        this.state = {
            fileUploadModelVisible: false,
            fileUploadModelValue: "",
            sh:'',
            now : 0
        };
        this.onClose = this.onClose.bind(this);
        this.send = this.send.bind(this);
        this.updateMessage = this.updateMessage.bind(this);
        this.notice = this.notice.bind(this);
    }

    send(){
        ajax({
            url: '/nccloud/hrkq/leave/extImportResultExl.do',
            data: [],
            async: true,
            success: (res) => {
                // toast({content: res.data,color:'success'});
                this.updateMessage(res.data);
                if(res.data.value == 100){
                    clearInterval(this.state.sh);
                }
            },
            error: (res) => {
                toast({ content: res.message, color: 'danger' });//错误消息
                clearInterval(this.state.sh);
            }
        })
    }

    updateMessage(data){

        let temp = this.state.fileUploadModelValue;
        temp = temp + data.message;

        this.setState({
            fileUploadModelValue : temp,
            now:data.value
        })
    }

    notice(total){
        ajax({
            url: '/nccloud/hrkq/leave/extImportExl.do',
            data: total,
            async: true,
            success: (res) => {
            },
            error: (res) => {
            }
        })
    }

    //导入
    upload(v) {
        window.hh = this
        if (!v) {
            return;
        }
        let formData = new FormData();
        let dome = document.querySelector('#fileInfo')
        // formData.append('imgfile', dome.files);
        //加参数
        for(var i = 0; i < dome.files.length; i ++){
            formData.append('attachment', dome.files[i]);
        }
        
        // headers['Content-Type'] == 'multipart/form-data'
        ajax({
            url: '/nccloud/hrkq/leave/extImportCheckExl.do',
            data: formData,
            headers:{'Content-Type': 'multipart/form-data'},
            success: (res) => {
                toast({content: '数据读取成功，正在导入',color:'success'});
                let total = parseInt(res.data);

                this.setState({
                    fileUploadModelVisible: true,
                    fileUploadModelValue: "",
                    sh:'',
                    now:0
                })

                let sh = setInterval(this.send, 3000, total);
                this.setState({
                    sh: sh
                })

                this.notice(total);//启动导入

                
                

                // for(let i = 0; i < total; i++){

                    
                    // let tempno = this.state.ajno;
                    // if(tempno == 1){
                    //     i = i - 1;
                    //     this.sleep(5000);
                    //     console.log("等待中。。。。")
                    // }else{
                    //     this.send(i);
                    //     tempno++;
                    //     this.setState({
                    //         ajno : tempno
                    //     })
                    // }
                // }
            }
        })
    }

    onClose() {
        this.setState({
            fileUploadModelVisible: false
        })
    }

    render () {
        const { fileUploadModelVisible, fileUploadModelValue, sh, now } = this.state;
        return(
            <div>
                <input style={{display: 'none'}} type='file' id='fileInfo' onChange={(v) => {this.upload(v)}}/>
                <NCModal
                    show={fileUploadModelVisible}
                    onHide={this.onClose}
                >
                    <ModalHeader closeButton={true} draggable={true}>
                        <span>导入结果查看</span>
                    </ModalHeader>
                    <ModalBody style={{ textAlign: 'center' }}>
                        <NCProgressBar size="sm" active now = {now} label={`${now}%`}></NCProgressBar>
                        <div style={{ width: 360, display: 'inline-block' }}>
                            导入情况如下：
                        </div>
                        <div dangerouslySetInnerHTML={{__html:fileUploadModelValue}}></div>
                    </ModalBody>
                    <ModalFooter>
                        {
                            <div>
                                <NCButton colors="primary" onClick={this.onClose}>确认</NCButton>
                            </div>
                        }

                    </ModalFooter>
                </NCModal>
            </div>
        )
        
    }

}

export default FileUploadModel;